/**
 * gridster.js - v0.2.1 - 2013-10-28 * http://gridster.net
 * Copyright (c) 2013 ducksboard; Licensed MIT
 */

.gridster {
	position: relative;
	margin: auto;
	height: 0;
}

.gridster > ul {
	margin: 0;
	list-style: none;
	padding: 0;
}

.gridster-item {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	list-style: none;
	z-index: 2;
	position: absolute;
	display: none;
}

.gridster-loaded {
	-webkit-transition: height .3s;
	-moz-transition: height .3s;
	-o-transition: height .3s;
	transition: height .3s;

	.gridster-item {
		display: block;
		position: absolute;
		-webkit-transition: opacity .3s, left .3s, top .3s, width .3s, height .3s;
		-moz-transition: opacity .3s, left .3s, top .3s, width .3s, height .3s;
		-o-transition: opacity .3s, left .3s, top .3s, width .3s, height .3s;
		transition: opacity .3s, left .3s, top .3s, width .3s, height .3s;
		-webkit-transition-delay: 50ms;
		-moz-transition-delay: 50ms;
		-o-transition-delay: 50ms;
		transition-delay: 50ms;
	}

	.gridster-preview-holder {
		display: none;
		z-index: 1;
		position: absolute;
		background-color: #ddd;
		border-color: #fff;
		opacity: 0.2;
	}

	.gridster-item.gridster-item-moving,
	.gridster-preview-holder {
		-webkit-transition: none;
		-moz-transition: none;
		-o-transition: none;
		transition: none;
	}
}

.gridster-mobile {
	height: auto !important;

	.gridster-item {
		height: auto;
		position: static;
		float: none;
	}
}

.gridster-item.ng-leave.ng-leave-active {
	opacity: 0;
}
.gridster-item.ng-enter {
	opacity: 1;
}

.gridster-item-moving {
	z-index: 3;
}

/* RESIZE */
.gridster-item-resizable-handler {
	position: absolute;
	font-size: 1px;
	display: block;
	z-index: 5;
}

.handle-se {
	cursor: se-resize;
	width: 0;
	height: 0;
	right: 1px;
	bottom: 1px;
	border-style: solid;
	border-width: 0 0 12px 12px;
	border-color: transparent;
}

.handle-ne {
	cursor: ne-resize;
	width: 12px;
	height: 12px;
	right: 1px;
	top: 1px;
}

.handle-nw {
	cursor: nw-resize;
	width: 12px;
	height: 12px;
	left: 1px;
	top: 1px;
}

.handle-sw {
	cursor: sw-resize;
	width: 12px;
	height: 12px;
	left: 1px;
	bottom: 1px;
}

.handle-e {
	cursor: e-resize;
	width: 12px;
	bottom: 0;
	right: 1px;
	top: 0;
}

.handle-s {
	cursor: s-resize;
	height: 12px;
	right: 0;
	bottom: 1px;
	left: 0;
}

.handle-n {
	cursor: n-resize;
	height: 12px;
	right: 0;
	top: 1px;
	left: 0;
}

.handle-w {
	cursor: w-resize;
	width: 12px;
	left: 1px;
	top: 0;
	bottom: 0;
}

.gridster .gridster-item:hover .gridster-box {
	border: 1.5px solid #B3B2B3;
}

.gridster .gridster-item:hover .handle-se {
	border-color: transparent transparent #ccc;
}